<page-header [title]="'批量上传商品图片'">
    <ng-template #breadcrumb>
        <nz-breadcrumb>
            <nz-breadcrumb-item>产品信息</nz-breadcrumb-item>
            <nz-breadcrumb-item><a [routerLink]="['/prod/product']">上传商品图片</a></nz-breadcrumb-item>
        </nz-breadcrumb>
    </ng-template>
    <ng-template #action>
        <button nz-button (click)="back()"style="float: right">
            <i class="anticon anticon-rollback" style="font-size: 14px"></i>返回产品资料
        </button>
    </ng-template>
</page-header>
<nz-alert nzType="info" nzShowIcon nzMessage="文件名称必须按照`SKU` + `后缀`的形式命名。例如：BL7001C10.JPG" class="mb-sm"></nz-alert>
<nz-alert nzType="warning" nzShowIcon nzMessage="最多同时上传20个文件" class="mb-sm"></nz-alert>
<nz-card>
<nz-upload
    nzType="drag"
    [nzMultiple]="true"
    nzAccept="image/*"
    [nzLimit]="20"
    [nzAction]="url"
    [nzData]="extraParam"
    (nzChange)="handleChange($event)">
    <p class="ant-upload-drag-icon">
      <i class="anticon anticon-inbox"></i>
    </p>
    <p class="ant-upload-text">Click or drag file to this area to upload</p>
    <p class="ant-upload-hint">Support for a single or multi upload. </p>
</nz-upload>
</nz-card>
